<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input id="input" />
    <ul id="list"></ul>

    <script>
      const func = (cb, time) => {
        let timer = null;
        return (e) => {
          if (timer) {
            clearTimeout(timer);
          }
          timer = setTimeout(() => {
            cb(e);
            timer = null;
          }, time);
        };
      };

      let testData = ["你好呀", "aa", "b", "bb", "c", "cc"];
      let input = document.getElementById("input");
      input.addEventListener(
        "input",
        func((e) => {
          let value = input.value;
          let arr = [];
          for (let item of testData) {
            console.log(item);
            if (item.search(value) >= 0) {
              arr.push(item);
            }
          }
          let html = "";
          for (let i = 0; i < arr.length; i++) {
            html += `<li>${arr[i]}</li>`;
          }
          document.getElementById("list").innerHTML = "";
          document.getElementById("list").innerHTML = html;
        }, 100)
      );
    </script>
  </body>
</html>
